<template>
  <div class="publicDynamic">
    <div class="header padding-24 space-between bg-active">
      <div class="h-back">
        <p class="fs-32 color-f" @click="cancel">取消</p>
      </div>
      <div class="title fs-36 color-f">{{type==1?'发布动态':'发布视频'}}</div>
      <div class="h-right">
        <p class="fs-32 color-f" @click="publick">发布</p>
      </div>
    </div>
    <div class="video-show space-between padding-24" v-if="type==2&&videoUrl!=''">
      <div class="video-box">
        <span class="dels" @click="removes()">
          <img :src="del" alt />
        </span>
        <p class="fs-20 color-f time">{{time}}</p>
        <video
          :src="videoUrl"
          class="video"
          id="video"
          :poster="poster"
          x5-playsinline="true"
          playsinline="true"
          webkit-playsinline="true"
        ></video>
      </div>
      <input type="text" placeholder="取个好标题吧，建议15字以内" class="right overFlow" v-model="title" />
    </div>
    <div class="text-box padding-24">
      <textarea placeholder="请说出你的想法吧…" v-model="text" maxlength="200"></textarea>
      <div class="right-num fs-36 color-9">{{200-text.length}}</div>
    </div>
    <div class="img-box flex wrap padding-24">
      <div v-if="type==1" class="img-item" v-for="(item,index) in imglist" :key="index">
        <span class="del" @click="remove(index)">
          <img :src="del" alt />
        </span>
        <img :src="item" alt />
      </div>

      <div class="add-img center" v-if="imglist.length<length&&videoUrl.length<length">
        <input type="file" @change="selectImg" :accept="filestype" :multiple="multiple" />
        <img :src="add" alt />
      </div>
    </div>
    <div class="choose-music bg-f">
      <div class="space-between padding-24" v-if="type==2" @click="gotocates">
        <div class="left center-col">
          <img :src="biaoqian" alt class="biaoqian" />
          <p class="fs-32">添加标签</p>
        </div>
        <div class="right center-col">
          <p class="color-9 fs-32" v-if="!cate[0]">最多可添加3个标签</p>
          <span class="overFlow fs-26" v-for="(item,index) in cate" :key="index" v-else>{{item}}</span>
        </div>
      </div>
      <div class="space-between padding-24 arrowright" @click="gotomusic">
        <div class="left center-col">
          <img :src="music" alt class="biaoqian" />
          <p class="fs-32" v-if="musicname==''">{{type==1?'给动态配上音乐':'给视频配上音乐'}}</p>
          <p class="fs-32" v-else>{{musicname}}</p>
        </div>
      </div>
      <div class="space-between padding-24" :class="{arrowright:aitaname==''}" @click="gotoaita">
        <div class="left center-col">
          <img :src="at" alt class="at" />
        </div>
        <p class="right-name overFlow">{{aitaname}}</p>
      </div>
    </div>
    <div class="logout center" v-if="isback">
      <div class="content">
        <div class="center">是否退出本次编辑？</div>
        <div class="center-col">
          <div class="cancel center" @click="isback=false">取消</div>
          <div class="sure center" @click="sure">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "",
      type: "",
      text: "",
      poster: "",
      multiple: true,
      isback: false,
      filestype: "image/*",
      length: 1,
      imglist: [], // 预览图片路径
      add: require("../../assets/frend/addimg.png"),
      del: require("../../assets/account/del.png"),
      biaoqian: require("../../assets/frend/biaoqian.png"),
      music: require("../../assets/frend/music.png"),
      at: require("../../assets/frend/at.png"),
      videoUrl: "",
      videoduration: "",
      time: "",
      cate: [],
      cateid: "",
      musicid: "",
      musicname: "",
      aitaname: "",
      aitaid: "",
      status:null
    };
  },
  created() {
    this.getpbtype();
  },
  mounted() {
    this.getsessionStoragedata();
  },
  methods: {
    getsessionStoragedata() {
      var checkedid = sessionStorage.getItem("checkedid");
      var checkedcate = sessionStorage.getItem("checkedcate");
      var checkedmusicid = sessionStorage.getItem("checkedmusicid");
      var checkedmusicname = sessionStorage.getItem("checkedmusicname");
      var checkedaitaid = sessionStorage.getItem("checkedaitaid");
      var checkedaitaname = sessionStorage.getItem("checkedaitaname");
      //console.log(checkedaitaid,checkedaitaname)
      if (checkedid == null && checkedcate == null) {
      } else {
        checkedcate = checkedcate.split(",");
        this.cate = checkedcate;
        this.cateid = checkedid;
      }
      if (checkedmusicid == null && checkedmusicname == null) {
      } else {
        this.musicid = checkedmusicid;
        this.musicname = checkedmusicname;
      }
      var data = JSON.parse(sessionStorage.getItem("data"));
      //console.log(data)
      if (data == null) {
      } else {
        this.title = data.title;
        this.videoUrl = data.videoUrl;
        this.imglist = data.imglist;
        this.text = data.text;
        this.poster = data.poster;
        this.time = data.time;
      }
      if (checkedaitaid == null && checkedaitaname == null) {
      } else {
        this.aitaname = checkedaitaname;
        this.aitaid = checkedaitaid;
      }

      //console.log(this.musicid,this.musicname)
    },
    getpbtype() {
      this.type = this.$route.query.type;
      this.status =  this.$route.query.status;
      if (this.type == 1) {
        this.multiple = true;
        this.filestype = "image/*";
      } else if (this.type == 2) {
        this.multiple = false;
        this.filestype = "video/*";
      }
    },
    // 选择图片
    selectImg(e) {
      if (this.type == 1) {
        this.length = 9;
        //console.log(e.target.files)
        //e.target.files=e.target.files.slice(0,9)
        var img = "";
        var imgurl = "";
        for (var i = 0; i < e.target.files.length && i < 9; i++) {
          var formdata1 = new FormData(); // 创建form对象
          var file = "";
          file = e.target.files[i];
          //console.log(file)
          var reader = new FileReader();
          var that = this;
          //console.log(reader)
          reader.readAsDataURL(file);
          //console.log(reader)
          reader.onload = function(e) {
            //console.log(this.result)
            //img = this.result
            //console.log(img)
            //that.imglist.push(img)
            //that.imglist=that.imglist.slice(0,9)
          };
          formdata1.append("file", file);
          let config = {
            headers: { "Content-Type": "multipart/form-data" }
          };
          //return
          var url = this.$host1 + `upload_file`;
          //var url =`http://mcs.izhixiu.cn/api/common/upload`
          this.$axios.post(url, formdata1, config).then(response => {
            if (response.status == 200) {
              //console.log(response)
              imgurl = response.data.dest;
              this.imglist.push(imgurl);
              //this.imgurl=this.imgurl.slice(0,9)
              //this.imglist=this.imgurl
              this.common.AlertWin("上传成功！");
            } else {
              this.common.AlertWin("网络错误！");
            }

            // console.log(this.imgurl)
          });
        }
      } else if (this.type == 2) {
        this.length = 1;
        var formdata1 = new FormData(); // 创建form对象
        var file = e.target.files[0];
        var reader = new FileReader();
        var that = this;
        reader.readAsDataURL(file);
        reader.onload = function(e) {
          //that.videoUrl = this.result
          //console.log(that.videoUrl)
        };
        formdata1.append("file", file);
        let config = {
          headers: { "Content-Type": "multipart/form-data" }
        };
        //return
        var url = this.$host1 + `upload_video`;
        this.$axios.post(url, formdata1, config).then(response => {
          if (response.status == 200) {
            //console.log(response)
            this.videoUrl = response.data.dest;
            this.poster = response.data.video_cover;
            //this.common.AlertWin(response.data.mes)
            this.common.AlertWin("上传成功！");
            setTimeout(() => {
              this.videoduration = document.getElementById("video").duration;
              this.time = this.common.formatSeconds(this.videoduration);
              //console.log(this.time)
            }, 500);
          } else {
            this.common.AlertWin("网络错误！");
          }
        });
      }
    },
    publick() {
      if (this.type == 1) {
        if (this.text == "") {
          this.AlertWin("内容不能为空！");
          return;
        }
        var data = {
          dynamic_type: 1,
          content: this.text,
          image_url: this.imglist,
          music_id: this.musicid,
          user_love_id: this.aitaid
        };
      } else if (this.type == 2 && this.status != 1) {
        if (this.title == "") {
          this.AlertWin("标题不能为空！");
          return;
        }
        if (this.content == "") {
          this.AlertWin("内容不能为空！");
          return;
        }
        if (this.videoUrl == "") {
          this.AlertWin("视频不能为空！");
          return;
        }
        var data = {
          dynamic_type: 2,
          title: this.title,
          content: this.text,
          music_id: this.musicid,
          video_cover: this.poster,
          video_url: this.videoUrl,
          video_status: 0,
          video_cate: this.cateid,
          user_love_id: this.aitaid
        };
      } else if (this.type == 2 && this.status == 1) {
        if (this.title == "") {
          this.AlertWin("标题不能为空！");
          return;
        }
        if (this.content == "") {
          this.AlertWin("内容不能为空！");
          return;
        }
        if (this.videoUrl == "") {
          this.AlertWin("视频不能为空！");
          return;
        }
        if (this.cateid == "") {
          this.AlertWin("视频标签不能为空！");
          return;
        }
        var data = {
          dynamic_type: 2,
          title: this.title,
          content: this.text,
          music_id: this.musicid,
          video_cover: this.poster,
          video_url: this.videoUrl,
          video_status: 1,
          video_cate: this.cateid,
          user_love_id: this.aitaid
        };
      }

      const url = this.$host1 + `home/dynamic/publishDynamic`;
      console.log(data)
      this.$axios
        .post(url, data)
        .then(res => {
          console.log(res);
          if (res.status == 200) {
            let resData = res.data;
            if (resData.code == 10002) {
              this.common.AlertWin(resData.msg);
              // setTimeout(() => {
              //   // this.$router.push("/login");
              // }, 2000);
            } else if (resData.code == 200) {
              this.common.AlertWin("发布成功！");
              this.removeItem();
              this.$router.go(-1);
            } else {
              this.common.AlertWin(resData.message);
            }
          } else {
            this.common.AlertWin("网络错误！请稍后重试！");
          }
        })
        .catch(() => {
          this.AlertWin("网络错误！请稍后重试！");
        });
    },
    remove(i) {
      this.imglist.splice(i, 1);
    },
    removeItem() {
      sessionStorage.removeItem("data");
      sessionStorage.removeItem("checkedid");
      sessionStorage.removeItem("checkedcate");
      sessionStorage.removeItem("checkedmusicid");
      sessionStorage.removeItem("checkedmusicname");
      sessionStorage.removeItem("checkedaitaid");
      sessionStorage.removeItem("checkedaitaname");
    },
    cancel() {
      if (
        this.videoUrl != "" ||
        this.title != "" ||
        this.text != "" ||
        this.imglist[0]
      ) {
        this.isback = true;
      } else {
        this.removeItem();
        this.$router.go(-1);
      }
    },
    sure() {
      this.removeItem();
      this.$router.go(-1);
    },
    removes() {
      this.videoUrl = "";
      //this.videoUrl.splice(0,1)
    },
    gotocates() {
      var data = {
        videoUrl: this.videoUrl,
        imglist: this.imglist,
        title: this.title,
        text: this.text,
        poster: this.poster,
        time: this.time
      };
      sessionStorage.setItem("data", JSON.stringify(data));
      this.$router.push("/cates");
    },
    gotoaita() {
      var data = {
        videoUrl: this.videoUrl,
        imglist: this.imglist,
        title: this.title,
        text: this.text,
        poster: this.poster,
        time: this.time
      };
      sessionStorage.setItem("data", JSON.stringify(data));
      this.$router.push("/aita");
    },
    gotomusic() {
      var data = {
        videoUrl: this.videoUrl,
        imglist: this.imglist,
        title: this.title,
        text: this.text,
        poster: this.poster,
        time: this.time
      };
      sessionStorage.setItem("data", JSON.stringify(data));
      this.$router.push("/choosemusic");
    }
  }
};
</script>
<style lang="scss">
.publicDynamic {
  width: 100%;
  //height: 100%;
  //position: absolute;
  padding-top: 1rem;
  box-sizing: border-box;
  background-color: #fff;
  .header {
    width: 100%;
    height: 1rem;

    .title {
      font-size: 0.36rem;
      font-weight: bold;
    }
  }
  .video-show {
    //padding-top: 0.3rem;
    //margin-top: 1rem;
    height: 1.5rem;
    border-bottom: 0.01rem solid #e9e9e9;
    //background-color: greenyellow;
    .video-box {
      width: 2rem;
      height: 1.15rem;
      position: relative;
      //background-color: greenyellow;
      .video {
        width: 100%;
        height: 100%;
        border-radius: 0.15rem;
        // margin-left: 0.24rem;
      }
      span {
        width: 0.3rem;
        height: 0.3rem;
        display: block;
        right: -0.1rem;
        top: -0.1rem;
        //background-color: red;
        position: absolute;
        img {
          width: 0.3rem;
          height: 0.3rem;
        }
      }
      .time {
        position: absolute;
        bottom: 0.1rem;
        right: 0.1rem;
      }
    }
    .right {
      width: calc(100% - 2.2rem);
      height: 0.8rem;
      font-size: 0.32rem;
      //background-color: greenyellow;
    }
  }
  .img-box {
    width: 100%;
    height: auto;
    margin-top: 0.2rem;
    //margin-bottom: 1.2rem;
    padding-bottom: 0.2rem;
    border-bottom: 0.01rem solid #e9e9e9;
    .img-item {
      width: 33%;
      //background-color: greenyellow;
      padding: 0 0.05rem;
      box-sizing: border-box;
      height: 2.2rem;
      position: relative;
      margin-bottom: 0.1rem;
      img {
        //position: relative;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        object-fit: cover;
      }
      span {
        width: 0.3rem;
        height: 0.3rem;
        display: block;
        right: 0rem;
        top: -0.1rem;
        //background-color: red;
        position: absolute;
        img {
          width: 0.3rem;
          height: 0.3rem;
        }
      }
    }

    .add-img {
      position: relative;
      width: 32%;
      height: 2.2rem;
      border-radius: 0.15rem;
      margin: 0 0.05rem;
      //background-color: greenyellow;
      border: 0.01rem solid #e9e9e9;
      img {
        width: 0.5rem;
        height: 0.5rem;
      }
      input {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
  }
  .text-box {
    padding-top: 0.3rem;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    //margin-top: 1rem;
    height: 3.8rem;
    textarea {
      width: 100%;
      height: 3rem;
      border: none;
      outline: none;
      font-size: 0.32rem;
      color: #444;
      //background-color: red
    }
    .right-num {
      bottom: 0;
      position: absolute;
      right: 0.5rem;
    }
  }
  .choose-music {
    height: auto;
    width: 100%;
    .space-between {
      height: 1rem;
      position: relative;
      border-bottom: 0.01rem solid #e9e9e9;
      .left {
        img {
          margin-right: 0.2rem;
        }
        .biaoqian {
          width: 0.27rem;
          height: 0.37rem;
        }
        .at {
          width: 0.39rem;
          height: 0.39rem;
        }
      }
      .right {
        span {
          display: block;
          line-height: 0.5rem;
          text-align: center;
          width: auto;
          height: 0.48rem;
          border: 0.01rem solid #999;
          border-radius: 0.24rem;
          padding: 0 0.1rem;
          max-width: 1.4rem;
          margin-left: 0.1rem;
        }
      }
      .right-name {
        width: auto;
        max-width: calc(100% - 1.5rem);
        //background-color: greenyellow
      }
    }
  }
}
</style>
